<template>
  <div class="pgmain">
    <!-- 上肢功能评估量表 UEFI  -->
    <div class="pgquestionbox beautifulScroll">
      <a-form ref="formRef" :rules="formRules" :model="formModel">
        <div class="pgquestion" v-for="(item, index) in pgdata" :key="item.id">
          <a-form-item :field="String(item.id)">
            <div class="pgname">{{ item.name }}</div>
            <div class="pgchoicebox">
              <a-radio-group
                :disabled="Evaluationshow"
                v-if="item.type == undefined"
                v-model="formModel[item.id]"
                :options="item.des"
              ></a-radio-group>
              <div v-else>
                <a-input
                  :disabled="Evaluationshow"
                  :style="{ width: '320px' }"
                  v-model="formModel[item.id]"
                  placeholder="备注"
                  allow-clear
                />
              </div>
            </div>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="pgckbox beautifulScroll">
      <img
        ref="nativeImg"
        src="@/assets/images/yundong.png"
        style="display: none"
      />
      <!-- <img src="@/assets/images/guanjieyan.png" alt="" class="pgckboximg" /> -->
      <a-image class="pgckzz" :src="nativeImg?.src" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { saveEvaluation } from '@/api/pingu';
  const nativeImg = ref<HTMLImageElement | null>(null);
  const title = ref('Fugl-Meyer运动功能评分法');
  const props = defineProps({
    // 定义patientTreatmentId属性，指定类型为字符串
    patientTreatmentId: {
      type: String,
      required: true, // 如果父组件必须传递该属性，可设为true
      // 可选：设置默认值（当required为false时生效）
      // default: 'default-id'
    },
    Evaluationshow: {
      type: Boolean,
    },
    Evaluationdata: {
      type: Object,
    },
  });
  const Evaluationshow = ref(props.Evaluationshow);
  const patientTreatmentId = ref(props.patientTreatmentId);
  const Evaluationdata = ref(props.Evaluationdata);
  const pgdata = [
    {
      id: 1,
      name: '1、肱二头肌（有无反射活动）',
      des: [
        { label: '不能引起反射活动', value: '0' },
        { label: '能引起反射活动', value: '2' },
      ],
    },
    {
      id: 2,
      name: '2、肱三头肌（有无反射活动）',
      des: [
        { label: '不能引起反射活动', value: '0' },
        { label: '能引起反射活动', value: '2' },
      ],
    },
    {
      id: 3,
      name: '3、肩上提（屈肌协同运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 4,
      name: '4、肩后缩（屈肌协同运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 5,
      name: '5、肩外展≥90（屈肌协同运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 6,
      name: '6、肩外旋（屈肌协同运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 7,
      name: '7、肘屈曲（屈肌协同运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 8,
      name: '8、前臂旋后（屈肌协同运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 9,
      name: '9、肩内收内旋（伸肌协调运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 10,
      name: '10、肘伸展（伸肌协调运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 11,
      name: '11、前臂旋前（伸肌协调运动）',
      des: [
        { label: '完全不能进行', value: '0' },
        { label: '部分完成', value: '1' },
        { label: '无停顿地充分完成', value: '2' },
      ],
    },
    {
      id: 12,
      name: '12、手触腰椎（伴有协同运动的活动）',
      des: [
        { label: '没有明显活动', value: '0' },
        { label: '手仅可向后越过髂前上棘', value: '1' },
        { label: '能顺利进行', value: '2' },
      ],
    },
    {
      id: 13,
      name: '13、肩关节屈曲90°， 肘关节伸直（伴有协同运动的活动）',
      des: [
        { label: '开始时手臂立即外展或肘关节屈曲', value: '0' },
        { label: '在接近规定位置肩关节外展或肘关节屈曲', value: '1' },
        { label: '能顺利进行', value: '2' },
      ],
    },
    {
      id: 14,
      name: '14、肩0度，肘屈90°，前臂旋前、旋后（伴有协同运动的活动）',
      des: [
        { label: '不能屈肘或前臂不能旋前', value: '0' },
        { label: '肩、肘位置正确，基本能旋前、旋后', value: '1' },
        { label: '能顺利进行', value: '2' },
      ],
    },
    {
      id: 15,
      name: '15、肩关节外展90°， 肘伸直，前臂旋前（脱离协同运动活动）',
      des: [
        { label: '开始时肘就屈曲，前臂偏离方向，不能旋前', value: '0' },
        {
          label: '可部分完成此动作或在活动时肘关节 屈曲或前臂不能旋前',
          value: '1',
        },
        { label: '能顺利进行', value: '2' },
      ],
    },
    {
      id: 16,
      name: '16、肩关节屈曲90－180° (前臂举臂过头) ，肘伸直，前臂中立位（脱离协同运动活动）',
      des: [
        { label: '开始时肘关节屈曲或肩关节发生外展', value: '0' },
        { label: '肩关节屈曲时肘关节屈曲、肩关外展', value: '1' },
        { label: '能顺利进行', value: '2' },
      ],
    },
    {
      id: 17,
      name: '17、肩屈曲30－90°，肘伸直，前臂旋前旋后（脱离协同运动活动）',
      des: [
        { label: '前臂旋前旋后完全不能进行或肩 、肘位不正确', value: '0' },
        { label: '肩、肘位置正确，基本上能完成旋前、旋后', value: '1' },
        { label: '能顺利进行', value: '2' },
      ],
    },
    {
      id: 18,
      name: '18、检查肱二头肌 、肱三头肌和指屈肌三种反射（反射亢进）',
      des: [
        { label: '至少2－3个反射明显亢进', value: '0' },
        { label: '一个反射明显亢进或至少二个反射活跃', value: '1' },
        { label: '活跃反射≤1个且无反射亢进', value: '2' },
      ],
    },
    {
      id: 19,
      name: '19、肩0°，肘屈90°时，腕背屈（腕稳定性）',
      des: [
        { label: '不能背曲腕关节达15°', value: '0' },
        { label: '可完成腕背屈，但不能抗阻力', value: '1' },
        { label: '施加轻微阻力，仍可保持腕背屈', value: '2' },
      ],
    },
    {
      id: 20,
      name: '20、肩0°，肘屈90°时，腕屈伸（腕稳定性）',
      des: [
        { label: '不能随意屈伸', value: '0' },
        { label: '不能再全关节活动范围内主动活动腕关节', value: '1' },
        { label: '能平滑地不停顿地进行', value: '2' },
      ],
    },
    {
      id: 21,
      name: '21、腕背伸（肘伸直，肩前屈30°时）',
      des: [
        { label: '不能背曲腕关节达15°', value: '0' },
        { label: '可完成腕背屈，但不能抗阻力', value: '1' },
        { label: '施加轻微阻力，仍可保持腕背屈', value: '2' },
      ],
    },
    {
      id: 22,
      name: '22、腕屈伸（肘伸直，肩前屈30°时）',
      des: [
        { label: '不能随意屈伸', value: '0' },
        { label: '不能再全关节范围内主动活动', value: '1' },
        { label: '能平滑地不停顿地进行', value: '2' },
      ],
    },
    {
      id: 23,
      name: '23、腕环形运动（肘伸直，肩前屈30°时）',
      des: [
        { label: '不能进行', value: '0' },
        { label: '腕关节活动费力或不完全', value: '1' },
        { label: '能正常完成', value: '2' },
      ],
    },
    {
      id: 24,
      name: '24、集团屈曲（手指）',
      des: [
        { label: '不能屈曲', value: '0' },
        { label: '能屈曲但不充分', value: '1' },
        { label: '能完全主动屈曲', value: '2' },
      ],
    },
    {
      id: 25,
      name: '25、集团伸展（手指）',
      des: [
        { label: '不能伸展', value: '0' },
        { label: '能放松主动屈曲的手指', value: '1' },
        { label: '能完全主动伸展', value: '2' },
      ],
    },
    {
      id: 26,
      name: '26、钩状抓握（手指）',
      des: [
        { label: '不能保持要求的位置', value: '0' },
        { label: '握力微弱', value: '1' },
        { label: '能抵抗相当大的阻力', value: '2' },
      ],
    },
    {
      id: 27,
      name: '27、侧捏（手指）',
      des: [
        { label: '不能进行', value: '0' },
        { label: '能用拇指捏住一张纸，但不能抵抗拉力', value: '1' },
        { label: '可牢牢捏住纸', value: '2' },
      ],
    },
    {
      id: 28,
      name: '28、对捏-拇食指可挟一只铅笔（手指）',
      des: [
        { label: '完成不能', value: '0' },
        { label: '捏力微弱', value: '1' },
        { label: '能抵抗相当大的阻力', value: '2' },
      ],
    },
    {
      id: 29,
      name: '29、圆柱状抓握（手指）',
      des: [
        { label: '不能保持要求的位置', value: '0' },
        { label: '握力微弱', value: '1' },
        { label: '能抵抗相当大的阻力', value: '2' },
      ],
    },
    {
      id: 30,
      name: '30、球状抓握（手指）',
      des: [
        { label: '不能保持要求的位置', value: '0' },
        { label: '握力微弱', value: '1' },
        { label: '能抵抗相当大的阻力', value: '2' },
      ],
    },
    {
      id: 31,
      name: '31、震颤（协调能力与速度）',
      des: [
        { label: '明显震颤', value: '0' },
        { label: '轻度震颤', value: '1' },
        { label: '无震颤', value: '2' },
      ],
    },
    {
      id: 32,
      name: '32、辨距障碍（协调能力与速度）',
      des: [
        { label: '明显的或不规则的辨距障碍', value: '0' },
        { label: '轻度的或规则的遍距障碍', value: '1' },
        { label: '无辨距障碍', value: '2' },
      ],
    },
    {
      id: 33,
      name: '33、速度（协调能力与速度）',
      des: [
        { label: '较健侧长6秒', value: '0' },
        { label: '较健侧长2－5秒', value: '1' },
        { label: '两者差距＜2秒', value: '2' },
      ],
    },
    {
      id: 34,
      name: '34、跟腱反射（ 反射活动下肢仰卧位）',
      des: [
        { label: '无反射活动', value: '0' },
        { label: '有反射活动', value: '2' },
      ],
    },
    {
      id: 35,
      name: '35、膝腱反射（ 反射活动下肢仰卧位）',
      des: [
        { label: '无反射活动', value: '0' },
        { label: '有反射活动', value: '2' },
      ],
    },
    {
      id: 36,
      name: '36、髋关节屈曲（屈肌协同运动下肢仰卧位）',
      des: [
        { label: '不能进行', value: '0' },
        { label: '部分运动', value: '1' },
        { label: '充分进行', value: '2' },
      ],
    },
    {
      id: 37,
      name: '37、膝关节屈曲（屈肌协同运动下肢仰卧位）',
      des: [
        { label: '不能进行', value: '0' },
        { label: '部分运动', value: '1' },
        { label: '充分进行', value: '2' },
      ],
    },
    {
      id: 38,
      name: '38、踝关节背屈（屈肌协同运动下肢仰卧位）',
      des: [
        { label: '不能进行', value: '0' },
        { label: '部分运动', value: '1' },
        { label: '充分进行', value: '2' },
      ],
    },
    {
      id: 39,
      name: '39、髋关节伸展（屈肌协同运动下肢仰卧位）',
      des: [
        { label: '没有运动', value: '0' },
        { label: '微弱运动', value: '1' },
        { label: '充分运动', value: '2' },
      ],
    },
    {
      id: 40,
      name: '40、髋关节内收（伸肌协同运动下肢仰卧位）',
      des: [
        { label: '没有运动', value: '0' },
        { label: '微弱运动', value: '1' },
        { label: '充分运动', value: '2' },
      ],
    },
    {
      id: 41,
      name: '41、膝关节伸展（伸肌协同运动下肢仰卧位）',
      des: [
        { label: '没有运动', value: '0' },
        { label: '微弱运动', value: '1' },
        { label: '充分运动', value: '2' },
      ],
    },
    {
      id: 42,
      name: '42、踝关节跖屈（伸肌协同运动下肢仰卧位）',
      des: [
        { label: '没有运动', value: '0' },
        { label: '微弱运动', value: '1' },
        { label: '充分运动', value: '2' },
      ],
    },
    {
      id: 43,
      name: '43、膝关节屈曲（伴有协同运动的活动坐位）',
      des: [
        { label: '无主动运动', value: '0' },
        { label: '膝关节能从微弱伸位屈曲，但屈曲＜ 90°', value: '1' },
        { label: '屈曲＞90°', value: '2' },
      ],
    },
    {
      id: 44,
      name: '44、踝关节背屈（伴有协同运动的活动坐位）',
      des: [
        { label: '不能主动背屈', value: '0' },
        { label: '主动背屈不完全', value: '1' },
        { label: '正常背屈', value: '2' },
      ],
    },
    {
      id: 45,
      name: '45、膝关节屈曲（脱离协同运动的活动站位）',
      des: [
        { label: '在髋关节伸展位时不能屈膝', value: '0' },
        {
          label: '髋关节0°时膝关节能屈膝，但＜90 °，或进行时髋关节屈曲',
          value: '1',
        },
        { label: '能自如运动', value: '2' },
      ],
    },
    {
      id: 46,
      name: '46、踝关节背屈（脱离协同运动的活动站位）',
      des: [
        { label: '不能主动活动', value: '0' },
        { label: '能部分背屈', value: '1' },
        { label: '能充分背屈', value: '2' },
      ],
    },
    {
      id: 47,
      name: '47、查跟腱、膝腱和膝屈肌三种反射（反射亢进仰卧）',
      des: [
        { label: '2－3个明显亢进', value: '0' },
        { label: '1个反射亢进或2个反射活跃', value: '1' },
        { label: '活跃的≤1个且无反射亢进', value: '2' },
      ],
    },
    {
      id: 48,
      name: '48、震颤（协同能力和速度，跟膝－胫试验 ，快速连续做5次仰卧）',
      des: [
        { label: '明显震颤', value: '0' },
        { label: '轻度震颤', value: '1' },
        { label: '无震颤', value: '2' },
      ],
    },
    {
      id: 49,
      name: '49、辩距障碍（协同能力和速度，跟膝－胫试验 ，快速连续做5次仰卧）',
      des: [
        { label: '明显的或不规则的辨距障碍', value: '0' },
        { label: '轻度的或规则的辨距障碍', value: '1' },
        { label: '无辨距障碍', value: '2' },
      ],
    },
    {
      id: 50,
      name: '50、速度（协同能力和速度，跟膝－胫试验 ，快速连续做5次仰卧）',
      des: [
        { label: '较健侧长6秒', value: '0' },
        { label: '较健侧长2－5秒', value: '1' },
        { label: '两者差距＜2秒', value: '2' },
      ],
    },
    {
      id: 51,
      name: '51、评定结论',
      des: [{ label: '0', value: '0' }],
      type: 'tk',
    },
  ];
  // 评估名称

  const formRef = ref();
  const formModel = ref<Record<string, string>>({});
  const formRules: Record<string, any[]> = {};

  pgdata.forEach((item) => {
    formModel.value[item.id] = '';
    formRules[item.id] = [
      { required: true, message: '必填', trigger: 'change' },
    ];
  });
  if (Evaluationdata.value && Object.keys(Evaluationdata.value).length > 0) {
    // 只有当Evaluationdata.value存在且不是空对象时才赋值
    formModel.value = { ...Evaluationdata.value };
    console.log('查看模式回显的数据处理完成', formModel.value);
  }
  const scoresSum = ref(0);
  // 计算总和的方法
  const calculateSum = () => {
    let sum = 0;

    // 1. 先获取所有type='tk'的项的id（转为字符串，与表单键名匹配）
    const tkItemIds = pgdata
      .filter((item: any) => item.type === 'tk')
      .map((item) => item.id.toString());

    // 2. 遍历表单数据，排除tk项和空值
    Object.entries(formModel.value).forEach(([key, value]) => {
      // 跳过条件：是tk项 或 值为空
      if (tkItemIds.includes(key) || value == '' || value == undefined) {
        return;
      }

      // 累加有效数值
      sum += Number(value);
    });

    scoresSum.value = sum;
    console.log('当前成绩', scoresSum.value);
  };

  //提交评估表
  const submitPg = () => {
    // 返回Promise以便父组件捕获状态
    return new Promise((resolve, reject) => {
      formRef.value.validate((errors: any) => {
        if (!errors) {
          // 初始计算一次
          calculateSum();

          saveEvaluation({
            patientTreatmentId: patientTreatmentId.value,
            evaluation: JSON.stringify(formModel.value),
            title: title.value,
            score: scoresSum.value,
          })
            .then((res: any) => {
              if (res.code == 200) {
                console.log('提交评估成功', res.data);
                resolve(res.data); // 成功时返回数据
              } else {
                // 接口返回非200状态视为失败
                reject(new Error(`提交失败: ${res.msg || '未知错误'}`));
              }
            })
            .catch((error: any) => {
              // 捕获接口调用异常
              console.error('提交评估失败', error);
              reject(new Error(`网络错误: ${error.message}`));
            });
        } else {
          // 表单验证失败
          reject(new Error('表单验证失败，请检查输入'));
        }
      });
    });
  };
  defineExpose({
    submitPg,
  });
</script>

<style scoped>
  .pgmain {
    height: 100%;
    display: flex;
  }
  .pgckbox {
    height: 600px;
    width: 600px;
    overflow: hidden;
    overflow-y: auto;
  }

  :deep(.pgckzz .arco-image-img) {
    width: 590px;
    height: 3736px;

    cursor: pointer;
  }
  .pgquestionbox {
    width: 600px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 600px;
  }
  .pgckboximg {
    width: 590px;
    height: 1301px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
  }
  .pgquestion {
    display: flex;
  }
  .pgname {
    font-size: 18px;
  }
  .pgchoicebox {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-top: 10px;
  }
  :deep(.pgchoicebox .arco-radio-label) {
    font-size: 18px !important;
  }

  :deep(.pgquestionbox .arco-form-item-content-flex) {
    flex-direction: column !important;
    align-items: normal !important;
    justify-content: normal !important;
  }

  :deep(.pgquestionbox .arco-col-5) {
    flex: 0 !important;
    width: 0 !important;
  }
  :deep(.pgquestionbox .arco-radio-group) {
    display: flex;
    flex-direction: column;
  }
  :deep(.arco-radio) {
    margin: 6px 0;
  }
</style>
